<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios练习</title>
		
		
	</head>
	<body>
		<!-- 导入axios -->
		<h1>Axios 调用</h1>
		<script src="../js/axios.js"></script>
		<script>
			// 编辑ajax请求
			//常用的请求方式:get delete post put 
			// 分析:get delete 同种类型
			// 		post put 同种类型
			/**
			 * 1.get请求
			 * url:http://localhost:8090/getUser
			 * 返回值: List 集合的JSON数据
			 */
			axios.get("http://localhost:8090/getUser").then(function(result){
				// data是axios封装的promise对象
				console.log(result)
				console.log(result.data);
			})
			// 2.get 带参数的请求方式 ?拼接的方式
			// 适合参数只有个别的场景
			// url:http://localhost:8090/getUserById?id=100
			// 返回值：User对象的JSON串
			axios.get("http://localhost:8090/getUserById?id=1").then(function(result){
				console.log(result.data)
			})
			/**
			 * 3.带参数的数据传递,params对象方式
			 * 如果参数有多个，可以封装成对象
			 */
			let user = {
				id: 1
			}
			axios.get("http://localhost:8090/getUserById",{
				params :user
				
			}).then(result=>{
				console.log(result.data)
			})
			/**
			 * 简化回调函数写法（restFul）
			 * 1.参数使用/分隔
			 * 2.url中不能出现动词
			 */
			axios.get("http://localhost:8090/user/3").then(result=>{
				console.log("AAA")
				console.log(result.data)
			})
			axios.delete("http://localhost:8090/user/27").then(result =>{
				console.log(result.data)
			})
			/**
			 * 请求类型:post/put
			 * 1.对象方式提交
			 * url:"localhost:8090/addUser"
			 * 对象方式提交要加@RequestBody
			 */
			axios.post("http://localhost:8090/addUser1",{
				name:"三大王",
				age:3000,
				sex:"男"
			}).then((result) =>{
				console.log("post")
				console.log(result.data)
			})
			/**
			 * 2.axios 利用form表单提交数据
			 *
			 */
			let params = new URLSearchParams();
			params.append("name","蝎子精")
			params.append("age",700)
			params.append("sex","女")
			axios.post("http://localhost:8090/addUserForm",params).then(result => {
				console.log(result.data)
			})
			/**
			 * 3.restFul方式实现表单数据提交
			 */
			axios.post("http://localhost:8090/user/琵琶精/900/女",params).then(result=> {
				console.log(result.data)
			})
			axios.put("http://localhost:8090/user/40/普贤菩萨").then(result => {
				console.log(result.data)
			})

		</script>
	</body>
</html>
